<template>
  <div class="container">
    <div class="main">
      <div class="leftside">
        <Leftside></Leftside>
      </div>
      <div class="center">
        <div class="card">
          <el-card style="width: 800px; text-align: center">
            <template #header>
              <h3>{{articledetail.title}}</h3>
              <div style="margin-top: 10px;">
                <span>{{articledetail.creatime}}</span>
              </div>
            </template>
            <div class="body">
            <Editor :content="articledetail.content" :isdisabled="true" />
            </div>
            <div class="footer">
              <el-popover placement="top" :width="300" trigger="click">
                <template #reference>
                  <el-button ref="buttonRef" type="primary">赞赏</el-button>
                </template>
                <div style="text-align: center;border: 2px solid #ff9854;">
                  <div class="tops">
                    一毛是鼓励
                  </div>
                  <img style="width: 250px;object-fit: cover;" src="@/assets/wx.png" alt="">
                  <div class="foots">
                    一块是真爱
                  </div>
                </div>
              </el-popover>
              <div class="time">
                发表时间： {{$moment(articledetail.time).format('YYYY年MM月DD日 HH时')}}
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Editor from '@/components/Editor.vue'
import Leftside from '@/components/Leftside.vue'
import {searchdata} from "../../apis/article";
import RightsideVue from '@/components/Rightside.vue'
import {sarticlebyid} from "../../apis/article";
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
onMounted(()=>{
  getarticledetail()
})
const id = route.query.id
let params = {
  _id: id
}
const articledetail = ref({})
const getarticledetail = () =>{
  sarticlebyid(params).then((res)=>{
    if (res.data.isok) {
      articledetail.value = res.data.data[0]
      console.log(articledetail.value, 'articledetail')
    }
  })
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  margin-top: 60px;
  background-color: #f5f5ff;
}
.header {
  padding-bottom: 10px;
  .img{
    width: 100%;
    object-fit: cover;
  }
}
.main {
  display: flex;
  justify-content: center;
  .center {
    padding: 0 20px;
    .body{
      padding: 20px;
    }
    .image{
      max-width: 100%;
      border-radius: 10px;
    }
  }
}
.time{
  margin-top: 10px;
}
</style>
